<template lang="pug">
.img-panel
  .nav-handle
    .num {{index+1}}/{{imgList.length}}
    .menu
      i(class="fa menu-btn",@click="toogleScreen",:class="{'fa-expand':!isFullScreen,'fa-compress':isFullScreen}")
      i(class="fa fa-close",@click="close")
  mt-swipe.img-swipe(ref="swipers",:auto="0",prevent,@change="handleChange")
    mt-swipe-item(v-for="(item,index) in imgList", :key="index")
      img(:src="item", width="100%")
</mt-swipe>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: '',
  data () {
    return {
      index: 0,
      isFullScreen: false
    }
  },
  computed: {
    ...mapGetters(['imgList'])
  },
  components: {

  },
  mounted () {

  },
  methods: {
    handleChange (index) {
      this.index = index
    },
    close () {
      this.$emit('imageWindow', false)
    },
    toogleScreen () {
      this.isFullScreen = !this.isFullScreen
      if (this.isFullScreen) {
        this.requestFullScreen()
      } else {
        this.exitFullscreen()
      }
    },
    requestFullScreen () {
      var de = document.documentElement
      if (de.requestFullscreen) {
        de.requestFullscreen()
      } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen()
      } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen()
      }
    },
    exitFullscreen () {
      var de = document
      if (de.exitFullscreen) {
        de.exitFullscreen()
      } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen()
      } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen()
      }
    }
  }
}
</script>

<style scoped lang="scss" >
.img-panel{
  background: #000;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  .nav-handle{
    color: #fff;
    display: flex;
    height: 80px;
    line-height: 80px;
    padding: 0 20px;
    justify-content: space-between;
    .menu i{
      padding:15px 20px;
    }
  }
  .img-swipe{
    flex: 1;
    img{
      position: absolute;
      top:50%;
      transform: translateY(-50%);
    }
  }
}
</style>
